import React, { useState } from 'react';
import s from './style.module.less';
import { Tabs, Table, Collapse } from '@knownsec/react-component';
import picIcon from '@/assets/svg/pic.svg';
import data from './data';

const { TabPane } = Tabs;
const { Panel } = Collapse;

export default function Compare() {
  const columns = [
    {
      title: '属性',
      dataIndex: 'cattr',
      render: (value) => <span style={{ fontWeight: 500 }}>{value}</span>,
    },
    {
      title: '变更前',
      dataIndex: 'cbefore',
      render: (value) => <span style={{ color: '#777' }}>{value}</span>,
    },
    {
      title: '变更后',
      dataIndex: 'cafter',
      render: (value) => <span style={{ color: '#777' }}>{value}</span>,
    },
  ];
  const dataList = [
    { cattr: 'MD5', cbefore: '888994aas3ds343deereta234dd', cafter: '888994aas3ds343deereta234da' },
    { cattr: '文件大小', cbefore: '9.7kb', cafter: '9.5kb' },
  ];
  const dataIndex = [];
  for (let k = 1; k < 100; k++) {
    dataIndex.push(k);
  }
  return (
    <>
      <Tabs
        // defaultActiveKey="Allevent"
        tabBarStyle={{
          backgroundColor: '#ffffff',
          fontSize: 14,
          fontWeight: 400,
          color: '#1E1F23',
          borderColor: '#ffffff',
          marginBottom: '0',
        }}
      >
        <TabPane tab="文本比对" key="1">
          <div className={s.wangtext}>
            <div className={s.textbox}>
              <div className={s.title}>共计1处不同</div>
              <div className={s.compareText}>
                <div className={s.item}>
                  <div className={s.indexList}>
                    {dataIndex.map((e) => (
                      <div key={e} className={s.index}>
                        {e}
                      </div>
                    ))}
                  </div>
                  <div className={s.text}>
                    <div>...</div>
                    {data['key1']}
                    <span className={s.diff}>{data['mkey1']}</span>
                    {data['ckey1']}
                    <div>...</div>
                  </div>
                </div>
                <div className={s.item}>
                  <div className={s.indexList}>
                    {dataIndex.map((e) => (
                      <div key={e} className={s.index}>
                        {e}
                      </div>
                    ))}
                  </div>
                  <div className={s.text}>
                    <div>...</div>
                    {data['key1']}
                    <span className={s.diff}>{data['mpkey1']}</span>
                    {data['ckey1']}
                    <div>...</div>
                  </div>
                </div>
              </div>
            </div>
            <div className={s.titles}>基本信息对比</div>
            <Table columns={columns} data={dataList}></Table>
          </div>
        </TabPane>
        <TabPane tab="图片比对(2)" key="2">
          <Collapse className={s.whitecoll} defaultActiveKey={['1']}>
            <Panel header="http://admin.com/home.png" key="1">
              <div className={s.flexitem}>
                <div className={s.changeitem}>
                  <div>
                    <img src={picIcon} alt="" />
                  </div>
                  <p>
                    MD5<span>4442233wer33455523243454545</span>
                  </p>
                  <p>
                    图片大小<span>9.6kb</span>
                  </p>
                </div>
                <div className={s.textdec}>&gt;&gt;变更后&gt;&gt;</div>
                <div className={s.changeitem}>
                  <div>
                    <img src={picIcon} alt="" />
                  </div>
                  <p>
                    MD5<span>4442233wer33455523243454545</span>
                  </p>
                  <p>
                    图片大小<span>9.6kb</span>
                  </p>
                </div>
              </div>
            </Panel>
            <Panel header="http://admin.com/banner.png" key="2">
              <div className={s.flexitem}>
                <div className={s.changeitem}>
                  <div>
                    <img src={picIcon} alt="" />
                  </div>
                  <p>
                    MD5<span>4442233wer33455523243454545</span>
                  </p>
                  <p>
                    图片大小<span>9.6kb</span>
                  </p>
                </div>
                <div className={s.textdec}>&gt;&gt;变更后&gt;&gt;</div>
                <div className={s.changeitem}>
                  <div>
                    <img src={picIcon} alt="" />
                  </div>
                  <p>
                    MD5<span>4442233wer33455523243454545</span>
                  </p>
                  <p>
                    图片大小<span>9.6kb</span>
                  </p>
                </div>
              </div>
            </Panel>
          </Collapse>
        </TabPane>
      </Tabs>
    </>
  );
}
